<template>
  <div>
    <a-layout>
      <a-layout-header>
        <a-row
          type="flex"
          justify="space-between"
          align="middle"
          class="header"
        >
          <div />
          <a-dropdown :trigger="['click']">
            <a-icon
              type="user"
              @click="e => e.preventDefault()"
              class="login"
            />
            <a-menu slot="overlay">
              <a-menu-item key="0">
                <span @click="login">登录</span>
              </a-menu-item>
              <a-menu-divider />
              <a-menu-item key="1">
                <span @click="toAccount">我的</span>
              </a-menu-item>
              <a-menu-divider />
              <a-menu-item key="2">
                <span @click="login">注销</span>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a-row>
      </a-layout-header>
      <a-layout-content><Nuxt /></a-layout-content>
      <a-layout-footer></a-layout-footer>
    </a-layout>
    <Login ref="loginRef" />
  </div>
</template>

<script>
import Login from "../components/login";
export default {
  name: "MainLayout",
  components: {
    Login
  },
  data() {
    return {};
  },
  methods: {
    login() {
      this.$refs.loginRef.setVisible();
    },
    toAccount() {
      this.$router.push("/account");
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  color: white;
  height: 100%;
  width: 100%;
  .login {
    font-size: 25px;
  }
}
</style>
